<script setup lang="ts">
import type {FormInstance} from "element-plus";

definePageMeta({
  layout:'admin',
  title:'用户中心',
});
const login=useLoginStore();
if(!login.info?.id){
  login.refreshInfo();
}
const show=ref(false);
const formRef=ref<FormInstance>();
const rules=reactive({
  account_name: [
    { required: true, message: '请输入支付宝收款人姓名', trigger: 'blur' },
  ],
  account: [
    { required: true, message: '请输入支付宝账户', trigger: 'blur' },
  ],
  money: [
    { required: true, message: '请输入提现金额', trigger: 'blur' },
    {pattern:/^\d+(\.\d{1,2})?$/,message:'提现金额格式不正确',trigger:'blur'},
    {validator:(rule, value, callback)=>{
        if(value<0.01){
          callback(new Error('提现金额不能小于0.01'))
        }else{
          callback()
        }
      },trigger:'blur'
    }

  ],
});
const form=ref({
  account_name:'',//支付宝账户名,
  account:'',//支付宝账户
  money:'',//提现金额
});
const draw=()=>{
  show.value=true;
  form.value={account_name:'',account:'',money:''};
}
const drawDo=()=>{
  formRef.value?.validate(async (valid,invalidFields) => {
    if (valid) {
      const {data,code}=await usePost('/finance/withdrawal',form.value);
      if(code==200){
        show.value=false;
        login.refreshInfo();
      }
    } else {
      showFieldsError(invalidFields)
    }
  });
}
const {data:notice,refresh}=await useServerGet('/notice/getList',{limit:10,page:1,type:10,is_up:1});

</script>

<template>
   <div class="box py-5 px-5">
          <div class="grid grid-cols-3 gap-5">
            <el-card class="flex-1">
              <div class="py-2 text-gray-400">基本信息</div>
              <el-form label-suffix="：" label-width="80px">
                <el-form-item label="账户名称">
                  <div class="flex justify-between w-full">
                    <div class="text-[var(--el-color-primary)]">{{ login.info.email }}</div>
<!--                    <div class="text-gray-400">修改账户邮箱</div>-->
                  </div>
                </el-form-item>
                <el-form-item label="账户ID">
                  <div class="flex justify-between w-full">
                    <div class="text-[var(--el-color-primary)]">{{ login.info.id }}</div>
                  </div>
                </el-form-item>
                <el-form-item label="实名认证">
                  <div class="flex justify-between w-full">
                    <div class="text-[var(--el-color-primary)]">{{ login.info.real_name }}</div>
                    <div class="text-gray-400"><NuxtLink to="/admin/user/auth">查看认证</NuxtLink>></div>
                  </div>
                </el-form-item>
                <el-form-item label="手机认证">
                  <div class="flex justify-between w-full">
                    <div class="text-[var(--el-color-primary)]">{{ login.info.phone }}</div>
<!--                    <div class="text-gray-400">修改手机</div>-->
                  </div>
                </el-form-item>
              </el-form>
            </el-card>
            <el-card class="flex-1">
              <div class="text-gray-400 leading-6" @click="login.toggleIsSecret">资金管理 <el-icon :size="24" class="align-bottom" ><ElIconHide v-if="login.isSecret"/><ElIconView v-else/></el-icon> </div>
              <div class="grid grid-cols-5 my-5 leading-10 align-middle" >
                <div class="text-center">
                  <div>总金额</div>
                  <div>{{login?.isSecret?'***':login.info.total_money??'0.00'}}</div>
                </div>
                <div class="text-center">
                  <div>冻结金额</div>
                  <div>{{login?.isSecret?'***':login.info.frozen_money??'0.00'}}</div>
                </div>
                <div class="text-center">
                  <div>可用余额</div>
                  <div>{{login?.isSecret?'***':login.info.money??'0.00'}}</div>
                </div>
                <div class="text-center align-middle col-span-2">
                  <el-button class="" @click="draw">提现</el-button>
                  <el-button type="primary"><NuxtLink to="/admin/finance/onlineCharge">充值</NuxtLink></el-button>
                </div>
              </div>
            </el-card>
            <el-card class="row-span-1 overflow-auto">
              <div class="text-gray-400 flex justify-between"><div>本站最新公告</div><div class="text-xs"><NuxtLink to="/admin/notice?type=10">查看全部<el-icon :size="16" class="align-middle"><ElIconArrowRight /></el-icon></NuxtLink></div></div>
              <ul class="my-5 news-box">
                <li v-for="item in notice.data.list" class="news-li">
                  <NuxtLink :to="`/noticeDetail/${item.id}.html`">
                    <div class="flex justify-between news">
                      <div class="leading-6 text-sm">{{ item.title }}</div>
                      <div class="text-xs leading-6">{{ item.created_at }}</div>
                    </div>
                  </NuxtLink>
                </li>
              </ul>
            </el-card>
<!--            <el-card class="col-span-2">-->
<!--              <div class="text-gray-400 my-5">域名管理</div>-->
<!--              <div class="grid grid-cols-3 gap-2 leading-[60px]">-->
<!--                <div class="flex justify-between bg-[#f7f9fa] px-2.5">-->
<!--                  <div><span class="text-xl font-bold pr-2">15</span>个待付款</div>-->
<!--                  <div class="leading-[60px]">前往付款 <el-icon :size="20" class="align-middle"><ElIconArrowRight /></el-icon></div>-->
<!--                </div>-->
<!--                <div class="flex justify-between bg-[#f7f9fa] px-2.5">-->
<!--                  <div><span class="text-xl font-bold pr-2">15</span>个预定中</div>-->
<!--                  <div class="leading-[60px]">前往查看 <el-icon :size="20" class="align-middle"><ElIconArrowRight /></el-icon></div>-->
<!--                </div>-->
<!--                <div class="flex justify-between bg-[#f7f9fa] px-2.5">-->
<!--                  <div><span class="text-xl font-bold pr-2">15</span>个竞价中</div>-->
<!--                  <div class="leading-[60px]">前往查看 <el-icon :size="20" class="align-middle"><ElIconArrowRight /></el-icon></div>-->
<!--                </div>-->
<!--                <div class="flex justify-between bg-[#f7f9fa] px-2.5">-->
<!--                  <div><span class="text-xl font-bold pr-2">15</span>个即将到期</div>-->
<!--                  <div class="leading-[60px]">前往查看 <el-icon :size="20" class="align-middle"><ElIconArrowRight /></el-icon></div>-->
<!--                </div>-->
<!--                <div class="flex justify-between bg-[#f7f9fa] px-2.5">-->
<!--                  <div><span class="text-xl font-bold pr-2">15</span>个出售中</div>-->
<!--                  <div class="leading-[60px]">前往管理 <el-icon :size="20" class="align-middle"><ElIconArrowRight /></el-icon></div>-->
<!--                </div>-->
<!--                <div class="flex justify-between bg-[#f7f9fa] px-2.5">-->
<!--                  <div><span class="text-xl font-bold pr-2">15</span>个我的域名</div>-->
<!--                  <div class="leading-[60px]">前往管理 <el-icon :size="20" class="align-middle"><ElIconArrowRight /></el-icon></div>-->
<!--                </div>-->
<!--              </div>-->

<!--            </el-card>-->
          </div>
     <el-dialog title="提现" v-model="show" width="500" align-center align="center">
       <el-form :model="form" :rules="rules" ref="formRef" class="w-[400px] mx-auto" label-width="150" label-suffix="：">
         <el-form-item label="支付宝账收款人姓名" prop="account_name">
           <el-input v-model="form.account_name" clearable placeholder="请输入支付宝账户名"></el-input>
         </el-form-item>
         <el-form-item label="支付宝账户" prop="account">
           <el-input v-model="form.account" clearable placeholder="请输入支付宝账户"></el-input>
         </el-form-item>
         <el-form-item label="提现金额" prop="money">
           <el-input v-model="form.money" clearable placeholder="请输入提现金额"></el-input>
         </el-form-item>
       </el-form>
       <div class="text-red-400 mb-2">温馨提醒：余额提现金融商收取2%手续费，资金顺延一个工作日到账。</div>
       <div slot="footer" class="dialog-footer">
         <el-button @click="show=false">取 消</el-button>
         <el-button type="primary" @click="drawDo">确 定</el-button>
       </div>
     </el-dialog>
   </div>
</template>

<style scoped lang="scss">
.box{
  background-color: #eef0f5;
  height: calc(100vh - 141px);
  padding-bottom: 20px;
}
.left-value{
  float: left;
  color:var(--el-color-primary);
}
.right-value{
  float: right;
  color: var(--el-border-color-light);
}
.news-li{
  &:nth-of-type(1){
    color:var(--el-color-error)
  }
  &:nth-of-type(2){
    color:var(--el-color-primary)
  }
}
.news{
  border-bottom: 1px solid var(--el-border-color-light);
  padding: 15px 0;
}
.news-box{
  height: calc(100vh - 400px);
  overflow: auto;
}
</style>